<template>
    <div class="personCenter">
      <div class="back">
        <div class="left">
          <div class="img-wrapper">
            <img src="../../../static/1447730639635536.png" alt="" width="100%" height="100%">
          </div>
        </div>
        <div class="right">
          <div class="text-wrapper">
            <p class="text">贷款赵先生</p>
            <p class="text" style="font-size: 16px">189-5566-5562</p>
          </div>
        </div>
      </div>
      <div class="front">
        <ul class="items-wrapper">
          <li class="item">
            <div class="left process">审批进度</div>
            <div class="right"></div>
          </li>
          <li class="item">
            <div class="left record">贷款记录</div>
            <div class="right"></div>
          </li>
        </ul>
        <ul class="items-wrapper">
          <li class="item">
            <div class="left bank">我的银行卡</div>
            <div class="right"></div>
          </li>
          <li class="item">
            <div class="left card">我的证件</div>
            <div class="right"></div>
          </li>
        </ul>
        <ul class="items-wrapper">
          <li class="item">
            <div class="left set">设置</div>
            <div class="right"></div>
          </li>
          <li class="item">
            <div class="left about">关于</div>
            <div class="right"></div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "personCenter"
    }
</script>

<style scoped lang="stylus">
  .personCenter
    height calc(100% - 44px)
    background #FAFAFA
    position relative
    .back
      height 108px
      background #49A2FE
      display flex
      .left
        flex 0 0 92px
        height 100%
        text-align center
        .img-wrapper
          width 64px
          height 64px
          border-radius 32px
          background #ff7156
          margin 13px auto
          overflow hidden
      .right
        flex 1
        line-height 45px
        .text-wrapper
          height 64px
          padding-top 13px
          padding-left 10px
          .text
            height 32px
            line-height 32px
            color #ffffff
            text-align left
            font-size 18px

    .front
      position relative
      top -18px
      margin 0 10px
      height 80px
      .items-wrapper
        background #ffffff
        border-radius 6px
        overflow hidden
        margin-bottom 10px
        .item
          display flex
          height 44px
          line-height 44px
          border-bottom 1px solid #D2D2D2
          color #333333
          font-size 14px
          &:last-child
            border-bottom none
          .left
            flex 1
            text-align left
            padding-left 40px
            &.about
              background url("user_icon_about.svg") no-repeat 7px center /26px 26px
            &.card
              background url("user_icon_card.svg") no-repeat 7px center /26px 26px
            &.set
              background url("user_icon_set.svg") no-repeat 7px center /26px 26px
            &.bank
              background url("user_icon_bank.svg") no-repeat 7px center /26px 26px
            &.record
              background url("user_icon_record.svg") no-repeat 7px center /26px 26px
            &.process
              background url("user_icon_process.svg") no-repeat 7px center /26px 26px
          .right
            flex 1
            background url("icon_arrow_right.svg") no-repeat calc(100% - 10px) center /8px 16px
</style>
